<template>
  <div>
    <ToolBar>
      <el-button type="primary" icon="el-icon-plus" size="small" @click = "handleAdd()">添加行</el-button>
      <div style="float: right">
        <el-input
                placeholder="搜索标题"
                size="small"
                style="width: 140px;margin-right:8px;"
                v-model="searchParams.postTitle"
                clearable>
        </el-input>

        <el-select v-model="searchParams.postStatus" size="small" clearable placeholder="请选择状态" style="width: 120px">
          <el-option
                  v-for="(v,k) in postStatus"
                  :key="k"
                  :label="v"
                  :value="k">
          </el-option>
        </el-select>
        <el-button type="success" icon="el-icon-search" size="small" @click="refresh()"></el-button>
      </div>
    </ToolBar>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width = "50">
      </el-table-column>
      <el-table-column prop="title" label="产业分类" width="180">
      </el-table-column>
      <el-table-column label="制造业产值" width="180">
        <el-table-column prop="zhizao01" label="2017" width="90">
        </el-table-column>
        <el-table-column prop="zhizao02" label="2018" width="90">
        </el-table-column>
        <el-table-column prop="zhizao03" label="2019" width="90">
        </el-table-column>
      </el-table-column>
      <el-table-column label="制造业人均产值" width="180">
        <el-table-column prop="renjun01" label="2017" width="90">
        </el-table-column>
        <el-table-column prop="renjun02" label="2018" width="90">
        </el-table-column>
        <el-table-column prop="renjun03" label="2019" width="90">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <el-table-column prop="address" label="摘要" width="180">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="60">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="small" title = "编辑" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增 编辑 -->
    <el-dialog
      :title="dailogTitleType"
      :visible.sync="editDialog"
      width="60%"
      :before-close="handleClose">

      <el-form ref="editNodeFrom" :rules="rules" :model="editNodeFrom" label-width="200px" style = "width:100%">

            <el-form-item label="产业分类" prop="title" required>
              <el-input v-model="editNodeFrom.title"></el-input>
            </el-form-item>

            <el-form-item label="制造产业2017" prop="zhizao01" required>
              <el-input v-model="editNodeFrom.zhizao01"></el-input>
            </el-form-item>
            <el-form-item label="制造产业2018" prop="zhizao02" required>
              <el-input v-model="editNodeFrom.zhizao02"></el-input>
            </el-form-item>
            <el-form-item label="制造产业2019" prop="zhizao03" required>
              <el-input v-model="editNodeFrom.zhizao03"></el-input>
            </el-form-item>
            <el-form-item label="制造业人均产值2017" prop="renjun01" required>
              <el-input v-model="editNodeFrom.renjun01"></el-input>
            </el-form-item>
            <el-form-item label="制造业人均产值2018" prop="renjun02" required>
              <el-input v-model="editNodeFrom.renjun02"></el-input>
            </el-form-item>
            <el-form-item label="制造业人均产值2019" prop="renjun03" required>
              <el-input v-model="editNodeFrom.renjun03"></el-input>
            </el-form-item>

            <el-form-item label="摘要" prop="address" required>
              <el-input v-model="editNodeFrom.address"></el-input>
            </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit(editNodeFrom)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ToolBar from '@/components/ToolBar.vue';
  import HelpHint from '@/components/HelpHint.vue';
  export default {
    data() {
      return {
        editDialog:false,
        dailogTitleType:'',
        editNodeFrom:{},
        dialogStatus:0, //0新增 1编辑
        searchParams:{
            postTitle:'',
            postStatus:'published',
        },
        postStatus:{
            draft:'草稿',
            published:'发布',
            recycled:"垃圾"
        },
        postType:{
            NEW:'最新',
            VUE:'vue相关',
            ELEMENT:'element相关'
        },
        tableData: [],
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          date: [
            {required: true, message: '请输入日期', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleClick(row) {
        this.$alert(row, '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      },
      refresh:function(){
        // 搜索
        console.log(this.searchParams)
      },
      saveEdit(editNodeFrom){
        // 新增/编辑行
        this.$refs.editNodeFrom.validate((valid) => {
          if (valid) {
            this.$axios.get('http://47.104.225.73:8001/User/Login', {}).then((res) => {
              //模拟加载 手动转换数据模型
              if(this.dialogStatus==0){
                this.tableData.push(editNodeFrom)
              }
              this.editNodeFrom = {}
              this.editDialog = false;
            }).catch((err) => {
              console.log(err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose(){
        // 关闭对话框
        this.editNodeFrom = {}
        this.editDialog = false;
      },
      handleEdit(row){
        this.editNodeFrom = row;
        this.dailogTitleType = "编辑列表";
        this.editDialog = true;
        this.dialogStatus = 1;
      },
      handleAdd(){
        this.dailogTitleType = "新增列表";
        this.editDialog = true;
        this.dialogStatus = 0;
      },
      loadData(){
        // 初始化数据
        var thisData = this.tableData;
        this.$axios.get('http://47.104.225.73:8001/User/Login', {token: 'xxx'}).then((res) => {
          //模拟加载 手动转换数据模型
          this.tableData = [{
            zhizao01:"222",
            zhizao02:"333",
            zhizao03:"444",
            renjun01:"111",
            renjun02:"111",
            renjun03:"111",
            date: '2016-05-03',
            title: '产业1',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }, {
            zhizao01:"222",
            zhizao02:"333",
            zhizao03:"444",
            renjun01:"111",
            renjun02:"111",
            renjun03:"111",
            date: '2016-05-02',
            title: '产业2',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }, {
            zhizao01:"222",
            zhizao02:"333",
            zhizao03:"444",
            renjun01:"111",
            renjun02:"111",
            renjun03:"111",
            date: '2016-05-04',
            title: '产业3',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }]
        }).catch((err) => {
              console.log(err);
        })
      },
      init:function(){
        this.loadData()
      }
    },
    components: {
        ToolBar,HelpHint
    },
    mounted:function(){
      this.init()
    }
  }
</script>


<style type="text/css">
  ::-webkit-scrollbar {
      width: 4px;
      height: 13px;
      background-color: #F5F5F5;
  }
</style>